layui.use(['form', 'element', 'layer', 'jquery', 'echarts'], function () {
    var form = layui.form,
        layer = layui.layer,
        element = layui.element,
        echarts = layui.echarts,
        $ = layui.jquery;

    var geoCoordMap = { //这里放你打点的坐标信息，虚拟信息
        '乌鲁木齐市': [87.617733, 43.692818],
        '克拉玛依市': [84.973946, 45.495886],
        '吐鲁番市': [89.184078, 42.947613],
        '昌吉回族自治州': [89.304012, 44.214577],
        '博尔塔拉蒙古自治州': [82.074778, 44.923258],
        '巴音郭楞蒙古自治州': [87.150969, 39.768552],
        '阿克苏地区': [80.265068, 41.170712],
        '克孜勒苏柯尔克孜自治州': [76.172825, 39.713431],
        '喀什地区': [77.589138, 38.467664],
        '和田地区': [79.92533, 37.110687],
        '伊犁哈萨克自治州': [81.317946, 43.92186],
        '塔城地区': [82.985732, 46.746301],
        '阿勒泰地区': [88.13963, 47.848393],
        '哈密市': [93.304012, 43.214577]
    };
    var locValue = [
        {name: "乌鲁木齐市", value: "136"},
        {name: "吐鲁番市", value: "86"},
        {name: "克拉玛依市", value: "68"},
        {name: "昌吉回族自治州", value: "68"},
        {name: "博尔塔拉蒙古自治州", value: "88"},
        {name: "巴音郭楞蒙古自治州", value: "123"},
        {name: "阿克苏地区", value: "99"},
        {name: "克孜勒苏柯尔克孜自治州", value: "89"},
        {name: "喀什地区", value: "78"},
        {name: "和田地区", value: "53"},
        {name: "伊犁哈萨克自治州", value: "68"},
        {name: "塔城地区", value: "55"},
        {name: "阿勒泰地区", value: "68"},
        {name: "哈密市", value: "52"}
    ];
    var locValue1 = [
        {name: "乌鲁木齐市", value: "9080.22"},
        {name: "吐鲁番市", value: "8073.25"},
        {name: "克拉玛依市", value: "5372.58"},
        {name: "昌吉回族自治州", value: "5775.59"},
        {name: "博尔塔拉蒙古自治州", value: "6753.25"},
        {name: "巴音郭楞蒙古自治州", value: "6162.2"},
        {name: "阿克苏地区", value: "5353.7"},
        {name: "克孜勒苏柯尔克孜自治州", value: "5422"},
        {name: "喀什地区", value: "7532.25"},
        {name: "和田地区", value: "21"},
        {name: "伊犁哈萨克自治州", value: "33"},
        {name: "塔城地区", value: "6"},
        {name: "阿勒泰地区", value: "12"},
        {name: "哈密市", value: "32"}
    ];
    var locMax1 = locValue1[0].value;
    for (var i = 0; i < locValue1.length - 1; i++) {
        locMax1 = locMax1 < locValue1[i + 1].value ? locValue1[i + 1].value : locMax1
    }
    var locValue2 = [
        {name: "乌鲁木齐市", value: "4080.22"},
        {name: "吐鲁番市", value: "4073.25"},
        {name: "克拉玛依市", value: "2372.58"},
        {name: "昌吉回族自治州", value: "2775.59"},
        {name: "博尔塔拉蒙古自治州", value: "3753.25"},
        {name: "巴音郭楞蒙古自治州", value: "2162.2"},
        {name: "阿克苏地区", value: "3353.7"},
        {name: "克孜勒苏柯尔克孜自治州", value: "3422"},
        {name: "喀什地区", value: "3532.25"},
        {name: "和田地区", value: "4532.25"},
        {name: "伊犁哈萨克自治州", value: "33"},
        {name: "塔城地区", value: "1532.25"},
        {name: "阿勒泰地区", value: "1532.25"},
        {name: "哈密市", value: "1532.25"}
    ];
    var locValue3 = [
        {name: "乌鲁木齐市", value: "480.22"},
        {name: "吐鲁番市", value: "873.25"},
        {name: "克拉玛依市", value: "572.58"},
        {name: "昌吉回族自治州", value: "575.59"},
        {name: "博尔塔拉蒙古自治州", value: "753.25"},
        {name: "巴音郭楞蒙古自治州", value: "662.2"},
        {name: "阿克苏地区", value: "5353.7"},
        {name: "克孜勒苏柯尔克孜自治州", value: "522"},
        {name: "喀什地区", value: "732.25"},
        {name: "和田地区", value: "241.54"},
        {name: "伊犁哈萨克自治州", value: "433"},
        {name: "塔城地区", value: "653"},
        {name: "阿勒泰地区", value: "312"},
        {name: "哈密市", value: "342"}
    ];
    var convertData = function (geoCoordMap, data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };


    // echart_map新疆地图
    var myChart1 = null;
    var myChart2 = null;
    var myChart3 = null;

    var option1 = null;
    var option2 = null;
    var option3 = null;

    function echart_map() {
        // 基于准备好的dom，初始化echarts实例
        myChart1 = echarts.init(document.getElementById('map1'));
        myChart2 = echarts.init(document.getElementById('map2'));
        myChart3 = echarts.init(document.getElementById('map3'));
        myChart1.showLoading();
        myChart2.showLoading();
        myChart3.showLoading();

        $.get(
            'json/xinjiang.json'
            //'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=650000_full'
            , function (data) {
                for (let index = 0; index < data.features.length; index++) {
                    console.log(data.features[index].properties.name);
                    if (data.features[index].properties.name == '北屯市'
                        || data.features[index].properties.name == '昆玉市'
                        || data.features[index].properties.name == '阿拉尔市'
                        || data.features[index].properties.name == '胡杨河市'
                        || data.features[index].properties.name == '铁门关市'
                        || data.features[index].properties.name == '图木舒克市'
                        || data.features[index].properties.name == '克拉玛依市'
                        || data.features[index].properties.name == '双河市'
                        || data.features[index].properties.name == '可克达拉市'
                        || data.features[index].properties.name == '石河子市'
                        || data.features[index].properties.name == '五家渠市'
                    ) {
                        data.features[index].properties.name = '';
                    }
                }

                echarts.registerMap('xinjiang', data);
                option1 = {
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        top: '10px',
                        left: '10px',
                        itemWidth: 50,
                        itemHeight: 20,
                        selectedMode: 'single',
                        textStyle: {
                            fontSize: 12,
                            color: '#F1F1F3'
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: locMax1,
                        calculable: true,
                        inRange: {
                            color: ['#fff', '#fff', '#fff']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    //鼠标经过展示数据方法
                    tooltip: {
                        triggerOn: "mousemove",
                        formatter: function (params) {
                            if (isNaN(params.value)) {
                                params.value = 0
                            }
                            if (params.componentSubType === 'effectScatter') {
                                params.value = params.data.value[2]
                            }
                            return "总数:" + params.value;
                        },
                    },
                    geo: {
                        show: true,
                        map: 'xinjiang',
                        roam: true,
                        aspectScale: 1,
                        label: {
                            emphasis: {
                                show: false,
                                color: "#fff"

                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                    },
                    series: [
                        {
                            type: 'effectScatter',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 2,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        }
                    ],
                };

                option2 = {
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        top: '10px',
                        left: '10px',
                        itemWidth: 50,
                        itemHeight: 20,
                        selectedMode: 'single',
                        data: [
                            {name: '年'},
                            {name: '季度'},
                            {name: '月'}],
                        textStyle: {
                            fontSize: 12,
                            color: '#F1F1F3'
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: locMax1,
                        calculable: true,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    //鼠标经过展示数据方法
                    tooltip: {
                        triggerOn: "mousemove",
                        formatter: function (params) {
                            if (isNaN(params.value)) {
                                params.value = 0
                            }
                            if (params.componentSubType === 'effectScatter') {
                                params.value = params.data.value[2]
                            }
                            var tipHtml = '<div style="width:250px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                                + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                                + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业能耗消费：' + '<span style="color:#f48225;margin:0 6px;">' + params.value + '</span>' + '万吨标准煤' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业能耗消费：' + '<span style="color:#f48225;margin:0 6px;">1286.2</span>' + '万吨标准煤' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业能耗消费：' + '<span style="color:#f48225;margin:0 6px;">1286.2</span>' + '万吨标准煤' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业能耗消费：' + '<span style="color:#f48225;margin:0 6px;">1286.2</span>' + '万吨标准煤' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业能耗消费：' + '<span style="color:#f48225;margin:0 6px;">222.2</span>' + '万吨标准煤' + '</p>'
                                + '</div>' + '</div>';
                            return tipHtml;
                        },
                        backgroundColor: 'rgba(175,238,238, 0)',
                        // 额外附加的阴影
                        extraCssText: 'box-shadow:0 20px 20px rgba(128, 217, 248, 1)',
                    },
                    geo: {
                        show: true,
                        map: 'xinjiang',
                        roam: true,
                        aspectScale: 1,
                        label: {
                            emphasis: {
                                show: false,
                                color: "#fff"

                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                    },
                    series: [
                        {
                            type: 'effectScatter',
                            name: '年',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue1).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        },
                        {
                            type: 'effectScatter',
                            name: '季度',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue2).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        },
                        {
                            type: 'effectScatter',
                            name: '月',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue3).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        }
                    ],
                };


                option3 = {
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        top: '10px',
                        left: '10px',
                        itemWidth: 50,
                        itemHeight: 20,
                        selectedMode: 'single',
                        data: [
                            {name: '年'},
                            {name: '季度'},
                            {name: '月'}],
                        textStyle: {
                            fontSize: 12,
                            color: '#F1F1F3'
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: locMax1,
                        calculable: true,
                        inRange: {
                            color: ['#50a3ba', '#eac736', '#d94e5d']
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    //鼠标经过展示数据方法
                    tooltip: {
                        triggerOn: "mousemove",
                        formatter: function (params) {
                            if (isNaN(params.value)) {
                                params.value = 0
                            }
                            if (params.componentSubType === 'effectScatter') {
                                params.value = params.data.value[2]
                            }
                            var querySelect = $("#queryselect1").val();
                            var tipHtml = '<div style="width:250px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                                + '<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                                + '<span style="margin-left:10px;color:#fff;font-size:16px;">' + params.name + '</span>' + '</div>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业碳排放：' + '<span style="color:#f48225;margin:0 6px;">' + params.value + '</span>' + '吨' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业碳排放：' + '<span style="color:#f48225;margin:0 6px;">1286.2</span>' + '吨' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业碳排放：' + '<span style="color:#f48225;margin:0 6px;">1286.2</span>' + '吨' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业碳排放：' + '<span style="color:#f48225;margin:0 6px;">1286.2</span>' + '吨' + '</p>'
                                + '<p style="color:#fff;font-size:12px;">' + '<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">' + '</i>'
                                + 'XXX企业碳排放：' + '<span style="color:#f48225;margin:0 6px;">222.2</span>' + '吨' + '</p>'
                                + '</div>' + '</div>';
                            return tipHtml;
                        },
                        backgroundColor: 'rgba(175,238,238, 0)',
                        // 额外附加的阴影
                        extraCssText: 'box-shadow:0 20px 20px rgba(128, 217, 248, 1)',
                    },
                    geo: {
                        show: true,
                        map: 'xinjiang',
                        roam: true,
                        aspectScale: 1,
                        label: {
                            emphasis: {
                                show: false,
                                color: "#fff"

                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                    },
                    series: [
                        {
                            type: 'effectScatter',
                            name: '年',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue1).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        },
                        {
                            type: 'effectScatter',
                            name: '季度',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue2).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        },
                        {
                            type: 'effectScatter',
                            name: '月',
                            zlevel: 10,
                            zoom: 1.2,
                            layoutCenter: ['50%', '50%'],
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap, locValue3).slice(0, 18),
                            symbolSize: 15,
                            rippleEffect: {
                                period: 3,
                                scale: 3,
                                brushType: 'stroke'
                            },
                            label: {
                                normal: {
                                    formatter: '{b}',
                                    position: 'right',
                                    show: true
                                }
                            },
                            steps: 1
                        }
                    ],
                };
                myChart1.setOption(option1);
                myChart2.setOption(option2);
                myChart3.setOption(option3);
                window.addEventListener("resize", function () {
                    myChart1.resize();
                    myChart2.resize();
                    myChart3.resize();
                });
            });

        myChart1.hideLoading();
        myChart2.hideLoading();
        myChart3.hideLoading();
        myChart1.on('click', function (params) {
            $("#mapDataScouce").html(
                '<li class="item">' + params.name + '</li>' +
                '<li class="item">数量</li>' +
                '<li class="item">石油石化</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">冶金</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">电力</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">机电</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">化学</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">煤炭</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">纺织</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">轻工</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">建材</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>' +
                '<li class="item">其他</li>' +
                '<li class="item">'+(Array(2).join(0)+Math.floor((Math.random()*15+1))).slice(-2)+'个</li>');
        });
    }

    //地图*********
    echart_map();

    $(document).on('click', '#queryButton1', function () {
        var queryName1 = $("#queryName1").val();
        if (queryName1 != "") {
            myChart2.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: 0
            });
        }
        echart_map();
    });
});
